<template>
  <div>
    <el-dialog title="奖金明细" :close-on-click-modal="false" :visible.sync="visible" width="90vw" top="8vh">
      <!--        <div >-->
      <!--          <span class="blue"></span>-->
      <!--          <el-button type="primary" style="float: right;" @click="exportExcel">导出明细</el-button>-->
      <!--        </div>-->
<div style="margin-bottom: 20px">
      <div>
        <el-button type="primary" style="float:right;margin-bottom:10px;" @click="handleDetail(id,'',1)">汇总明细</el-button>
      </div>
      <el-table ref="sumTable" style="width: 100%" :data="dwQb" border stripe>
        <el-table-column width="80" header-align="center" align="center" type="index" label="序号">
        </el-table-column>
        <el-table-column show-overflow-tooltip header-align="center" align="center" prop="rySjdw" label="部门名称">
        </el-table-column>
        <el-table-column width="300" header-align="center" align="center" prop="jjxMc" label="奖金项名称">
        </el-table-column>
        <el-table-column width="180" header-align="center" align="center" prop="jjJe" label="下发金额">
        </el-table-column>
        <el-table-column width="180" header-align="center" align="center" prop="jjJeFpId" label="已发金额">
        </el-table-column>
        <el-table-column width="180" header-align="center" align="center"  label="差额">
          <template slot-scope="scope">
            {{scope.row.jjJe-scope.row.jjJeFpId||0}}
          </template>
        </el-table-column>
        <el-table-column width="100" header-align="center" align="center" prop="rs" label="发放人数">
        </el-table-column>
        <el-table-column min-width="100" header-align="center" align="center"  label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="handleDetail(id,scope.row,2)">发放明细表</el-button>
             
          </template>
        </el-table-column>
      </el-table>
</div>
      <el-table v-if="isShowDetail" ref="ffMxABTable"
                :data="grQb" border stripe
                style="width: 100%;height: 65vh; overflow-y: auto;">
        <el-table-column width="80" header-align="center" align="center" type="index" label="序号">
        </el-table-column>
        <el-table-column prop="ryCode" label="编号" header-align="center" align="center" min-width="100">
        </el-table-column>
        <el-table-column prop="ryName" label="姓名" header-align="center" align="center" min-width="100">
        </el-table-column>
        <el-table-column prop="ryZhiWei" label="岗位" header-align="center" align="center" min-width="100">
        </el-table-column>
        <el-table-column prop="ryZwjb" label="职级" header-align="center" align="center" min-width="100">
        </el-table-column>
         <el-table-column prop="ry_sjdw" label="部门" header-align="center" align="center" min-width="100">
        </el-table-column>
        <!-- <el-table-column prop="config02" label="考核" header-align="center" align="center" min-width="100">
        </el-table-column>
        <el-table-column prop="config03" label="排名" header-align="center" align="center" min-width="100">
        </el-table-column> -->
        <el-table-column label="奖金" header-align="center" align="center">
          <el-table-column prop="jjJe" label="合计(元)" header-align="center" align="right" min-width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.jjxMc=='领导年终奖'">
                {{ $formatNum(scope.row.jj_je_ff||0) }}
              </span>
              <span v-else>
                {{ $formatNum(scope.row.jj_je||0) }}
              </span>

            </template>
          </el-table-column>
          <el-table-column v-if="showYf" label="已发奖金" prop="jjJeTj" header-align="center" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.jjJeTj}}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="jjJeTj" label="年度统计金额(元)" header-align="center" align="right" min-width="100">
            <template slot-scope="scope">
              {{ $formatNum(scope.row.jjJeTj||0) }}
            </template>
          </el-table-column>
          <el-table-column prop="jjJeFf" label="统计领导已发金额(元)" header-align="center" align="right" min-width="100">
            <template slot-scope="scope">
              {{ $formatNum(scope.row.jjJeFf||0) }}
            </template>
          </el-table-column>
          <el-table-column prop="ydje" label="应得金额(元)" header-align="center" align="right" min-width="100">
            <template slot-scope="scope">
              {{ $formatNum(scope.row.ydje||0) }}
            </template>
          </el-table-column> -->
          <el-table-column v-for="(item, index) in jjxTjXq" :key="index" :label="item.jjxName"
                           header-align="center" align="center">
            <el-table-column min-width="100" :prop="'jj_je_id'+item.jjxId+''" label="奖金小计(元)" header-align="center"
                             align="right">
              <template slot-scope="scope">
                <span v-if="scope.row.jjxMc=='领导年终奖'">
                  {{ $formatNum(scope.row.jj_je_ff) }}
                </span>
                <span v-else>
                   {{ $formatNum(scope.row['jj_je_id' + item.jjxId]||0) }}
                </span>

              </template>
            </el-table-column>
            <el-table-column min-width="100" :prop="'jj_je_dx_id'+item.jjxId+''" label="定向奖金(元)"
                             header-align="center"
                             v-if="dx"
                             align="right">
              <template slot-scope="scope">
                {{ $formatNum(scope.row['jj_je_dx_id' + item.jjxId]||0) }}
              </template>
            </el-table-column>
            <el-table-column min-width="100" :prop="'jj_je_fp_id'+item.jjxId+''" label="分配奖金(元)"
                             header-align="center"
                             align="right">
              <template slot-scope="scope">
                {{ $formatNum(scope.row['jj_je_fp_id' + item.jjxId]||0)}}
              </template>
            </el-table-column>
            <el-table-column min-width="100" :prop="'jj_je_jk_id'+item.jjxId+''" label="加扣奖金(元)"
                             header-align="center"
                             align="right">
              <template slot-scope="scope">
                {{ $formatNum(scope.row['jj_je_jk_id' + item.jjxId]||0) }}
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column prop="jjJeId" label="其他奖金(元)" header-align="center" v-if="qt" align="right"
                           min-width="100">
            <!--                    <template slot-scope="scope">-->
            <!--                      {{ $formatNum(scope.row.jj_je_id) }}-->
            <!--                    </template>-->
          </el-table-column>
        </el-table-column>
        <el-table-column label="备注" header-align="center" align="left" min-width="200">
          <template slot-scope="scope">
            {{ getSm(scope.row) }}
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" v-if="isShowDetail" @click="exportExcel">导出明细</el-button>
        <el-button type="primary" plain @click="visible = false">关闭</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  workForlwFf,
  viewRyDetail
} from '@/api/jiangjin/jiangjinfpjjfpdjb'
import FileSaver from 'file-saver'
import XLSX from 'xlsx'

export default {
  components: {},

  data() {
    return {
      visible: false,
      dataForm: {},
      jiangjinFpJjfpdjb: {},
      jjxXq: [],
      jjxTjXq: [],
      jjxJeXq: {},
      dwQb: [],
      grQb: [],
      zjQb: [],
      jcList: [],
      dx: false,
      jk: false,
      qt: false,
      isShowDetail:false,
      id:Number,
      showYf:false
    }
  },
  created: function () {

  },
  methods: {
    init(id) {
      this.loadData(id)
      this.id = id
      this.isShowDetail=false
      this.showYf=false
    },
    /**
     * 加载数据
     */
    loadData(id) {
      workForlwFf(id).then(response => {
        this.dataForm = response.data.data;
        this.jiangjinFpJjfpdjb = response.data.data.jiangjinFpJjfpdjb;
        if (this.jiangjinFpJjfpdjb && this.jiangjinFpJjfpdjb.jjxJeXq) {
          this.jjxJeXq = JSON.parse(this.jiangjinFpJjfpdjb.jjxJeXq)
        }
        if (this.jiangjinFpJjfpdjb && this.jiangjinFpJjfpdjb.jjxXq) {
          this.jjxXq = JSON.parse(this.jiangjinFpJjfpdjb.jjxXq)
        }
        if (this.jiangjinFpJjfpdjb && this.jiangjinFpJjfpdjb.jjxTjXq) {
          this.jjxTjXq = JSON.parse(this.jiangjinFpJjfpdjb.jjxTjXq)
        }
        this.dwQb = response.data.data.dwQb;
        this.grQb = response.data.data.grQb;
        this.zjQb = response.data.data.zjQb;
        this.jcList = response.data.data.jcList;
        for (var i in this.grQb) {
          if (this.grQb[i].jjJeDxId > 0) {
            this.dx = true;
          }
          if (this.grQb[i].jjJeJkId > 0) {
            this.jk = true;
          }
          if (this.grQb[i].jjJeId > 0) {
            this.qt = true;
          }
        }
        this.visible = true;
      });
    },
    //发放明细
    handleDetail(id,row,flag){
       this.dataForm=[];
      this.isShowDetail=true;
      var deptId;
      if(row){
         deptId=row.deptId;
      }else{
        deptId="x"
      }
      // if(flag==1){
      //     sjdw='1';
      // }

      viewRyDetail(id,deptId).then(response => {
        this.dataForm = response.data.data;
        if(row.jjxMc=='领导年终奖'){
          this.showYf=true
        }else{
          this.showYf=false
        }
        this.jiangjinFpJjfpdjb = response.data.data.jiangjinFpJjfpdjb;
        if (this.jiangjinFpJjfpdjb && this.jiangjinFpJjfpdjb.jjxJeXq) {
          this.jjxJeXq = JSON.parse(this.jiangjinFpJjfpdjb.jjxJeXq)
        }
        if (this.jiangjinFpJjfpdjb && this.jiangjinFpJjfpdjb.jjxXq) {
          this.jjxXq = JSON.parse(this.jiangjinFpJjfpdjb.jjxXq)
        }
        if (this.jiangjinFpJjfpdjb && this.jiangjinFpJjfpdjb.jjxTjXq) {
          this.jjxTjXq = JSON.parse(this.jiangjinFpJjfpdjb.jjxTjXq)
        }
        this.grQb = response.data.data.grQb;
        for (var i in this.grQb) {
          if (this.grQb[i].jjJeDxId > 0) {
            this.dx = true;
          }
          if (this.grQb[i].jjJeJkId > 0) {
            this.jk = true;
          }
          if (this.grQb[i].jjJeId > 0) {
            this.qt = true;
          }
        }
        this.visible = true;
      });
    },
    getSm(r) {
      let data = [];
      for (var i in this.jcList) {
        if (this.jcList[i].userCode == r.ryCode) {
          data.push(this.jcList[i].jjSm + "（" + this.jcList[i].lx + this.jcList[i].jjJe + "）");
        }
      }
      return data.join();
    },
    exportExcel() {
      const excelName = this.jiangjinFpJjfpdjb.jjMc + "_明细"

      try {
        const $e = this.$refs['ffMxABTable'].$el
        let $table = $e.querySelector('.el-table__fixed')
        if (!$table) {
          $table = $e
        }
        const wb = XLSX.utils.table_to_book($table, {
          raw: true
        })

        const wbout = XLSX.write(wb, {
          bookType: 'xlsx',
          bookSST: true,
          type: 'array'
        })
        FileSaver.saveAs(
          new Blob([wbout], {
            type: 'application/octet-stream'
          }),
          `${excelName}.xlsx`,
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.error(e)
      }
    }
  }
}

</script>

<style>

</style>
